@import 'mixin.scss';
@import 'color.scss';
$checked:"../../assets/images/checked.png";
.cart {
    &-box {
        width: 100%;
        padding-bottom: rem(95px);
        overflow: hidden;
        .label {
            display: inline-block;
            margin-left: rem(20px);
            width: rem(40px);
            height: rem(40px);
            border-radius: 50%;
        }
        .checkbox {
            display: none;
        }
        .checkbox+label {
            border: 1px #606A7D solid;
        }
        .checkbox:checked+label {
            border-color: $subject-color;
            background-image: url($checked);
            background-repeat: no-repeat;
            background-position: center;
            background-size: rem(17px) rem(12px);
            background-color: $subject-color;
        }
    }
    &-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: rem(95px);
        border-top: 1px $border-color solid;
        background: $color-white;
        .total-price {
            @include flex;
            padding-right: rem(20px);
            font-size: rem(24px);
            color: $color-ff1969;
            line-height: rem(90px);
            text-align: right;
            span {
                font-size: rem(32px);
                font-weight: bold;
            }
        }
        .buy-btn {
            width: rem(215px);
            height: 100%;
            font-size: rem(30px);
            color: $color-white;
            text-align: center;
            line-height: rem(95px);
            background-color: $subject-color;
        }
        .checked-all {
            font-size: rem(30px);
            .label {
                margin-right: rem(20px);
            }
        }
    }
    &-items {
        margin-top: rem(20px);
        background-color: $color-white;
    }
    &-items-head {
        height: rem(85px);
        border-bottom: 1px $border-color solid;
        font-size: rem(30px);
        .company-name {
            display: inline-block;
            @include flex;
            margin-left: rem(20px);
        }
        .company-edit {
            margin-right: rem(25px);
        }
    }
    &-item-pro {
        li {
            position: relative;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            transform: translateX(0);
            .label {
                margin-top: rem(41px);
            }
            .item-del-btn {
                position: absolute;
                right: rem(-153px);
                top: 0;
                bottom: 0;
                width: rem(153px);
                font-size: rem(30px);
                text-align: center;
                color: $color-white;
                background-color: $color-ff1969;
            }
            .item-pro-info {
                padding: rem(30px) 0 0;
            }
            .item-pro {
                @include flex;
                margin-right: rem(20px);
                padding-bottom: rem(30px);
                border-bottom: 1px $border-color solid;
            }
            .pro-info {
                @include flex;
                padding: 0 rem(30px);
                h2 {
                    font-size: rem(28px);
                    line-height: rem(35px);
                    color: $link-a-color;
                    word-break: break-all;
                }
                p {
                    margin-top: rem(10px);
                    font-size: rem(26px);
                    color: #606a7c;
                    line-height: rem(30px);
                }
            }
            &:last-of-type {
                .item-pro {
                    border-bottom: none;
                }
            }
            .cart-price-qty {
                margin-top: rem(45px);
            }
            .cart-price {
                @include flex;
                font-size: rem(32px);
                font-weight: bold;
            }
            .cart-qty {
                font-size: rem(28px);
            }
        }
        .item-pro-thumb {
            margin-left: rem(20px);
            width: rem(123px);
            height: rem(123px);
        }
    }
}